<template>
  <div class="main p-4">
    <van-empty v-if="dataList.length == 0" description="暂时还没有请假记录" />
    <div
      v-else
      v-for="(item, index) in dataList"
      :key="index"
      class="p-4 shadow-md"
    >
      <div class="title flex justify-between">
        <h3 class="font-bold text-xl">{{ item.leavetype }}</h3>
        <van-tag :type="item.state | type">{{ item.state | state }}</van-tag>
      </div>
      <div class="mt-2">
        <p>{{ item.reason }}</p>
      </div>

      <div class="flex justify-between mt-2">
        <p class="text-xs">
          时间：{{ item.starttime | date }} - {{ item.endtime | date }}
        </p>
        <p class="text-xs">申请时间：{{ item.createtime | date }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: 'leaveRecord',
  data () {
    return {
      dataList: []
    }
  },
  filters: {
    date (time) {
      return dayjs(time).format('YYYY-MM-DD ')
    },
    state (type) {
      if (type == 0) {
        return '未审批'
      }
      if (type == 1) {
        return '不通过'
      }
      if (type == 2) {
        return '通过'
      }
    },

    type (type) {
      if (type == 0) {
        return 'primary '
      }
      if (type == 1) {
        return 'danger'
      }
      if (type == 2) {
        return 'success'
      }
    }
  },
  created () {
    this.getLeave()
  },
  computed: {
    user () {
      return this.$store.getters.user
    }
  },
  methods: {
    async getLeave () {
      const { data: result } = await this.$Axios.get('getleave', {
        params: {
          u_id: this.user.stu_id
        }
      })
      console.log(result);
      this.dataList = result
    },
  },
}
</script>

<style scoped>
</style>